<template>
  <div class="home-swiper">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" :stop-propagation="false">
      <van-swipe-item v-for="(banner, index) in banners" :key="index" class="swipe-item">
        <a :href="banner.link">
          <img :src="banner.image"  alt="">
        </a>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import Vue from 'vue';
import { Swipe, SwipeItem} from 'vant';

Vue.use(Swipe);
Vue.use(SwipeItem);

export default {
  name:'HomeSwiper',
  props:{
    banners:{
      type:Array,
      default(){
        return []
      }
    }
  }
}
</script>

<style scoped>
  .my-swipe .swipe-item img{
    width: 100%;
  }
</style>